<template>
  <div class="radioFestival">
      <div class="header">
          <p class="one" @click='toPoster()'>关注成功</p>
          <p class="two" style="margin-top:0.2rem;">恭喜你为主持人助力成功，新用户奖励1元现金红包</p>
          <p class="two three">快去听见广播APP领取吧</p>
      </div>
      <div v-for="oneList in goodsList" :key="oneList.id" class="father">
        <div class="goodsList">
            <div class="dis">
                {{oneList.header}}
            </div>
            <div class="listDivBig"  v-if="oneList.listDivBig.length > 0">
                <img @click="toDetail(img.id)" v-for="img in oneList.listDivBig" :key="img.id" v-lazy="img.url" alt="">
            </div>
            <div class="listDivSmall" v-if="oneList.listDivSmall.length > 0">
                <img @click="toDetail(img.id)" v-for="img in oneList.listDivSmall" :key="img.id" v-lazy="img.url" alt="">
            </div>
            <div class="bottomDiv">
                <div class="bg" @click="toListPage()">
                    <p>更多商品</p>
                </div>
            </div>
        </div>
      </div>
     
  </div>
</template>
<script>
import Recommend from "@components/Recommend";
import cookie from "@utils/store/cookie";
import debounce from "lodash.debounce";
import share from "../../assets/js/common/share.js";
import shareMsg from "../../assets/js/common/shareConfig.js";
const CHECKED_IDS = "cart_checked";

export default {
  name: "radioFestival",
  components: {
    Recommend
  },
  props: {},
  data: function() {
    return {
        from1:'h5',
        goodsList:[
            {
                header:'0元购',
                type:'1',
                listDivBig:[
                    
                ],
                listDivSmall:[
                    {
                        url:require("@assets/images/superSale/freeBuy1.png"),
                        id:'114'
                    },
                    {
                        url:require("@assets/images/superSale/freeBuy2.png"),
                        id:'379'
                    },
                    {
                        url:require("@assets/images/superSale/freeBuy3.png"),
                        id:'120'
                    },
                    {
                        url:require("@assets/images/superSale/freeBuy4.png"),
                        id:'121'
                    },
                    {
                        url:require("@assets/images/superSale/freeBuy5.png"),
                        id:'287'
                    },
                    {
                        url:require("@assets/images/superSale/freeBuy6.png"),
                        id:'288'
                    },
                ]
            },
        ],
        token3:'',
        salt3:'',
    };
  },
  watch: {
    
  },
  mounted: function() {
      if(this.$route.query.isToken){
        this.$store.commit(
            "LOGIN",
            this.$route.query.isToken
        );
        cookie.set('OID', this.$route.query.oId); 
        }
        var shareUrl1 = window.location.href.split('?')[0];
        if(this.$route.query.from1 == 'app'){
            shareMsg.shareConfig(
                'app',
                "0",
                "0",
                "听见年货节",
                "听见广播",
                shareUrl1,
                "https://seefm.oss-cn-beijing.aliyuncs.com/image/icon.png",
                "",
                "1"
              );
        }
        share.share(
            shareUrl1,
            "听见年货节",
            "听见广播",
            "https://seefm.oss-cn-beijing.aliyuncs.com/image/icon.png"
        );
        share.QQshare(
            shareUrl1,
            "听见年货节",
            "听见广播",
            "https://seefm.oss-cn-beijing.aliyuncs.com/image/icon.png"
        );
  },
  created(){
      if(this.$route.query.from1){
        this.from1 = this.$route.query.from1;
      }
       if(this.$route.query.token3){
        this.token3 = this.$route.query.token3;
      }
       if(this.$route.query.salt3){
        this.salt3 = this.$route.query.salt3;
      }
      cookie.set("from1", this.from1);
      if(this.from1 == 'app'){
          this.getTitle();
      }
  },
  methods: {
        toDetail:function(id){
            if(this.from1 == 'app'){
                this.$router.push({
                    path: "/detail/" + id + "?mer_id=5070770&from1="+this.from1
                });
            }else{
                this.$router.push({
                    path: "/detail/" + id + "?mer_id=5070770"
                });
            }
            
        },
        toPoster(){
            if(this.from1 == 'app'){
                 window.location.href='http://activity.test.cbct.cn/lachinePoster?from1=app&token3='+this.token3+'&salt3='+ this.salt3
            }else{
                 window.location.href='http://activity.test.cbct.cn/lachinePoster?token3='+this.token3+'&salt3='+ this.salt3
            }
        },
        toListPage:function(){
            if(this.from1 == 'app'){
                this.$router.push({
                    path: "/superSale?from1="+this.from1
                });
            }else{
                this.$router.push({
                    path: "/superSale"
                });
            }
        },
        getTitle: function() {
            var self = this;
            var u = navigator.userAgent,
            app = navigator.appVersion;
            var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
            var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            var obj = {
                action: "setTitle",
                content: {
                title: '2020年度电台盛典'
                }
            };
            if (isAndroid) {
                App.onAppResponse(JSON.stringify(obj));
            }
        },
  }
};
</script>
<style scoped>
    .radioFestival{
        width: 100%;
        /* height: 100vh; */
        min-height: 100vh;
        box-sizing: border-box;
        background:url('../../assets/images/festive_bg.png') no-repeat; 
        background-size:cover;
        background-position: center;
        overflow: hidden;
    }
    .header{
        text-align: center;
        margin: 0.9rem auto 0.52rem;
    }
    .header .one{
        font-size: 0.7rem;
        font-weight: 600;
        color: #FFFFFF;
        letter-spacing:3px; 
    }
    .header .two{
        font-size: 0.3rem;
        font-weight: 400;
        color: #FFFFFF;
        letter-spacing:1px; 
    }
    .father{
        width: 7.22rem;
        margin: 0 0.14rem;
        box-sizing:border-box;
        background-image: linear-gradient(180deg, rgba(255, 226, 191, 1), rgba(255, 229, 160, 0.16));
        border-radius:0.08rem;
        padding:0.02rem;
    }
    .radioFestival .goodsList{
        width: 7.18rem;
        height: auto;
        border-radius: 0.08rem;
        background: linear-gradient(180deg, #FF3A21 0%, rgba(223, 37, 37, 0) 100%);
        /* padding-bottom: 0.66rem; */
    }
    .radioFestival .goodsList .lookmore{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 0.26rem;
    }
    .radioFestival .goodsList .lookmore p{
        font-size: 0.28rem;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 0.4rem;
        margin: 0 0.08rem 0 2.92rem;
    }
    .radioFestival .goodsList .lookmore img{
        width: 0.2rem;
    }
    .radioFestival .dis{
        text-align: center;
        font-size: 0.32rem;
        font-weight: 600;
        color: #763205;
        height: 0.56rem;
        width: 3.36rem;
        line-height: 0.58rem;
        margin-left: 1.93rem;
        margin-bottom: 0.48rem;
        height: auto;
        background: linear-gradient(180deg, #FFDFB8 0%, #FFB53C 100%);
        border-radius: 0px 0px 0.22rem 0.22rem;
        box-sizing: border-box;
    }
    .radioFestival .listDivSmall{
        width:100%;
        box-sizing: border-box;
        padding: 0 0.14rem;
        display: flex;
        box-sizing: border-box;
        display: -webkit-flex;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        height: auto;
    }
    .radioFestival .listDivSmall img{
        width: 2.26rem;
        height: 3.6rem;
        margin-bottom: 0.08rem;
    }
    .radioFestival .listDivBig{
        width: 6.96rem;
        margin: 0 0.13rem 0.04rem 0.11rem; 
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        height: auto;
    }
    .radioFestival .listDivBig img{
        width: 3.44rem;
        height: 4.92rem;
        margin-bottom: 0.08rem;
    }
    .radioFestival .bottomDiv{
        margin: 0.5rem auto 0.66rem;
    }
    .radioFestival .bottomDiv .bg{
        width: 5.24rem;
        height: 0.71rem;
        background: linear-gradient(180deg, #FFDFB8 0%, #FFB53C 100%);
        border-radius: 0.44rem;
        text-align: center;
        font-weight: 600;
        color: #763205;
        font-size: 0.28rem;
        letter-spacing: 2px;
        line-height: 0.73rem;
        margin: auto;
    }
</style>
